<template>
      <div class="indexVideo" @click='tzClick'>
          <div class="indexVideo_l">
            <img :src="categoryData.img" style="witdh:100%; height:27.778vw;">
            <div>
                <span>
                    <van-icon class="icon" name="play-circle-o" style="font-size:3vw; line-height:10px"/>
                    <span class="commentlen">{{!categoryData.commentlen ? '666' : categoryData.commentlen}}</span>
                </span>
                <span>
                    <van-icon name="like-o" style="font-size:3vw;"/>
                    <span>520</span>
                </span>
            </div>
          </div>
          
          <div class="indexVideo_name">
              {{categoryData.name}}
          </div>
      </div>
</template>

<script>
export default {
    props:['categoryData'],
    methods:{
        tzClick(){
            if(this.$route.path != `/ArticleSp/${this.categoryData.id}`){
               this.$router.push(`/ArticleSp/${this.categoryData.id}`) 
            }
        }
    }

}
</script>

<style lang="less" scoped>
.indexVideo{
    margin: 2px 0;
    .indexVideo_l{
        overflow: hidden;
        position: relative;
        div{
            position: absolute;
            display: flex;
            bottom: 0;
            justify-content: space-between;
            left: 0;
            right: 0;
            color: rgb(190, 179, 179);
            padding: 0 1vw;
            background: linear-gradient(0deg,rgba(0,0,0,.85),transparent);
            span{
                font-size: 3vw;
            }
        }
    }
}
.indexVideo_name{
    font-size: 14px;
    margin: 1.389vw 0;
}

</style>